import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    a: 1,
    b: 10,
    userName: '张三',
    age: 18,
    spList: [
      { id: 1, title: '商品1' },
      { id: 2, title: '商品2' },
      { id: 3, title: '商品3' }
    ]
  },
  mutations: {
    /*每一项都是一个函数，可以声明两个形参
    mutation的名字：function(state, [载荷]) {

    }*/
    addA(state) {
      state.a++
    },
    addB(state, count) {
      console.log('count', count)
      state.b = state.b + count
      // state.b = state.b + count.i
      // state.b = state.b + count[0]
    },
    getList(state, newList) {
      console.log('newList', newList)
      state.spList = newList
    }
  },
  getters: {
    /* getter的名字: function(state) {
       return 要返回的值
     }, */
    addAge(state) {
      return ++state.age
    },
    // 在 getters 属性中可以访问其他 getters 属性
    message(state, getters) {
      return `我是${state.userName}，年龄：${getters.addAge}`
    },
    // getters 可以返回一个函数，调用这个函数可以接收参数
    getTodoById: (state) => (id) => {
      return state.spList.find(item => item.id === id)
    },
  },

  actions: {
    /* action的名字: function(context, 载荷) {
       1. 发异步请求, 请求数据
       2. commit调用mutation来修改数据
       context.commit('mutation名', 载荷)
    } */
    mnGetList(state, data) {
      console.log('data', data)
      setTimeout(() => {
        let newList = []
        for (let index = 0; index < data.pageSize; index++) {
          newList.push({ id: index + 1, title: `商品${index + 1}` })
        }
        state.commit('getList', newList)
        // getList
      }, 2000)
    }
  },
  modules: {
    user: {
      // namespaced: true,
      state: {
        userInfo: {
          name: '张小三',
          age: 18,
          sex: '男',
          position: '前端'
        }
      },
      getters: {},
      mutations: {},
      actions: {},
      modules: {}
    }
  }
})
